<template>
	<view class="container">
		<!-- 顶部自定义导航栏 -->


		<!-- logo图片 -->
		<view class="logo-box">
			<image class="logo" src="/static/index.png" mode="heightFix" />
		</view>

		<!-- 用户名输入框 -->
		<view class="input-box">
			<input v-model="username" placeholder="用户名" class="input" />
		</view>
		<!-- 密码输入框 -->
		<view class="input-box">
			<input v-model="password" placeholder="密码" class="input" password />
		</view>
		<!-- 记住我复选框 -->
		<view class="input-box" style="background:transparent;box-shadow:none;justify-content:flex-start;">
			<label style="display:flex;align-items:center;font-size:15px;color:#666;">
				<checkbox v-model="remember" style="transform:scale(0.8);margin-right:8px;" />
				记住我
			</label>
		</view>

		<!-- 按钮区域 -->
		<view class="btn-group">
			<button class="login-btn" @click="sumbit">登录</button>
			<button class="register-btn">注册</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import http from '../../http.js';
const username = ref('')
const password = ref('')
const remember = ref(false)



function sumbit() {
	if (!username.value || !password.value) {
		// @ts-ignore
		uni.showToast({
			title: '请输入用户名和密码',
			icon: 'none'
		});
		return;
	}
	http({
		url: '/user/login',
		method: 'post',
		data: {
			userName: username.value,
			password: password.value,
			remember: remember.value
		}
	}).then(res => {
		console.log(res);

		if (res && res.code === 1) {
			// @ts-ignore
			uni.showToast({ title: '登录成功', icon: 'success' });
			setTimeout(() => {
				// @ts-ignore
				uni.switchTab({ url: '/pages/home/home' });
			}, 500);
		} else {
			// @ts-ignore
			uni.showToast({ title: res?.msg || '登录失败', icon: 'none' });
		}
	}).catch(() => {
		// @ts-ignore
		uni.showToast({ title: '网络错误', icon: 'none' });
	});
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background: #fafbfc;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.navbar {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	box-sizing: border-box;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.title {
	font-size: 20px;
	font-weight: bold;
	color: #222;
}

.icons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.circle-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #222;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-box {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 32px 0 24px 0;
}

.logo {
	width: 160px;
	height: 120px;
	object-fit: contain;
}

.input-box {
	width: 80%;
	margin: 0 auto 16px auto;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	padding: 0 12px;
	display: flex;
	align-items: center;
}

.input {
	width: 100%;
	height: 44px;
	border: none;
	outline: none;
	font-size: 16px;
	background: transparent;
}

.btn-group {
	display: flex;
	flex-direction: row;
	width: 80%;
	margin: 32px auto 0 auto;
	gap: 16px;
}

.login-btn,
.register-btn {
	flex: 1;
	height: 44px;
	font-size: 18px;
	border-radius: 6px;
	border: none;
}

.login-btn {
	background: #409eff;
	color: #fff;
}

.register-btn {
	background: #43c37e;
	color: #fff;
}
</style>
